.wz-hover {
    padding: 25px 80px;
    display: inline-block;
    margin: 15px 30px;
    border: 3px solid #fff;
    position: relative;
    background: 0 0;
    color: #fff;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s
}

.wz-hover:after {
    content: '';
    position: absolute;
    z-index: -1;
    background: #fff;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s
}

.wz-hover:focus {
    box-shadow: none;
    outline: 0
}

.wz-hover-height-full:after {
    width: 100%;
    height: 0;
    top: 0;
    left: 0
}

.wz-hover-height-full:hover {
    color: #0e83cd
}

.wz-hover-height-full:hover:after {
    height: 100%
}

.wz-hover-width-full:after {
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff
}

.wz-hover-width-full:active,
.wz-hover-width-full:hover {
    color: #0e83cd
}

.wz-hover-width-full:active:after,
.wz-hover-width-full:hover:after {
    width: 100%
}

.wz-hover-width-half {
    overflow: hidden
}

.wz-hover-width-half:after {
    width: 0;
    height: 103%;
    top: 50%;
    left: 50%;
    background: #fff;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.wz-hover-width-half:active,
.wz-hover-width-half:hover {
    color: #0e83cd
}

.wz-hover-width-half:hover:after {
    width: 90%;
    opacity: 1
}

.wz-hover-width-half:active:after {
    width: 101%;
    opacity: 1
}

.wz-hover-height-half {
    overflow: hidden
}

.wz-hover-height-half:after {
    width: 101%;
    height: 0;
    top: 50%;
    left: 50%;
    background: #fff;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.wz-hover-height-half:active,
.wz-hover-height-half:hover {
    color: #0e83cd
}

.wz-hover-height-half:hover:after {
    height: 75%;
    opacity: 1
}

.wz-hover-height-half:active:after {
    height: 130%;
    opacity: 1
}

.wz-hover-lean {
    overflow: hidden
}

.wz-hover-lean:after {
    width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
    background: #fff;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg)
}

.wz-hover-lean:active,
.wz-hover-lean:hover {
    color: #0e83cd
}

.wz-hover-lean:hover:after {
    height: 260%;
    opacity: 1
}

.wz-hover-lean:active:after {
    height: 400%;
    opacity: 1
}

.wz-hover-arrow {
    border-radius: 50px;
    border: 3px solid #fff;
    color: #fff;
    overflow: hidden
}

.wz-hover-arrow:active {
    border-color: #17954c;
    color: #17954c
}

.wz-hover-arrow:hover {
    background: #24b662
}

.wz-hover-arrow:before {
    position: absolute;
    height: 100%;
    font-size: 12px;
    line-height: 5;
    color: #fff;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s
}

.wz-hover-arrow:active:before {
    color: #17954c
}

.wz-hover-arrow-right:before {
    left: 130%;
    top: 0
}

.wz-hover-arrow-right:hover:before {
    left: 80%
}

.wz-hover-arrow-left:before {
    left: -50%;
    top: 0
}

.wz-hover-arrow-left:hover:before {
    left: 10%
}

.wz-hover-change {
    border: 0;
    background: #823aa0;
    color: #fff;
    height: 70px;
    min-width: 260px;
    line-height: 24px;
    font-size: 16px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden
}

.wz-hover-change:active {
    background: #9053a9;
    top: 2px
}

.wz-hover-change span {
    display: inline-block;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all .3s;
    -moz-backface-visibility: hidden;
    transition: all .3s;
    backface-visibility: hidden
}

.wz-hover-change:before {
    position: absolute;
    height: 100%;
    width: 100%;
    line-height: 2.5;
    font-size: 180%;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s
}

.wz-hover-change:active:before {
    color: #703b87
}

.wz-hover-change-top:hover span {
    -webkit-transform: translateY(300%);
    -moz-transform: translateY(300%);
    -ms-transform: translateY(300%);
    transform: translateY(300%)
}

.wz-hover-change-top:before {
    left: 0;
    top: -100%
}

.wz-hover-change-top:hover:before {
    top: 0
}

.wz-hover-change-left:hover span {
    -webkit-transform: translateX(200%);
    -moz-transform: translateX(200%);
    -ms-transform: translateX(200%);
    transform: translateX(200%)
}

.wz-hover-change-left:before {
    left: -100%;
    top: 0
}

.wz-hover-change-left:hover:before {
    left: 0
}

.wz-coolhover span:after,
.wz-coolhover span:before,
.wz-coolhover:after,
.wz-coolhover:before {
    z-index: -1
}

.centerer {
    width: 100%;
    max-width: 600px;
    margin: 0 auto
}

.wrap {
    width: 50%;
    float: left
}

.wz-coolhover {
    z-index: 1;
    background: #fff;
    text-align: center;
    line-height: 80px;
    position: relative;
    display: block;
    margin: 20px auto;
    width: 100%;
    height: 80px;
    max-width: 250px;
    text-transform: uppercase;
    overflow: hidden;
    border: 1px solid currentColor
}

.wz-coolhover:focus {
    box-shadow: none;
    outline: 0
}

.wz-coolhover:after,
.wz-coolhover:before {
    box-sizing: border-box;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-swipe {
    color: #9a3789
}

.wz-coolhover-swipe:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 80px;
    background: #520c46
}

.wz-coolhover-swipe:hover {
    color: #e1c4dc
}

.wz-coolhover-swipe:hover:before {
    width: 250px
}

.wz-coolhover-swipe:active {
    background: #881474
}

.wz-coolhover-swipe-out:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: #6b4432 transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0
}

.wz-coolhover-swipe-out:hover {
    color: #ecdcd4
}

.wz-coolhover-swipe-out:hover:after {
    border-width: 330px 330px 0 0
}

.wz-coolhover-swipe-out:active {
    background: #b27254
}

.wz-coolhover-swipe-in {
    color: #bc4b41
}

.wz-coolhover-swipe-in:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent transparent transparent #6a1a13;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-swipe-in:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent transparent #6a1a13 transparent;
    position: absolute;
    right: 0;
    bottom: 0
}

.wz-coolhover-swipe-in:hover {
    color: #ebcac7
}

.wz-coolhover-swipe-in:hover:before {
    border-width: 206.25px 0 0 206.25px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-swipe-in:hover:after {
    border-width: 0 0 206.25px 206.25px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-swipe-in:active {
    background: #b02b20
}

.wz-coolhover-close {
    color: #48a6b1
}

.wz-coolhover-close:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent transparent transparent #185a62;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-close:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent #185a62 transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-close:hover {
    color: #c9e5e8
}

.wz-coolhover-close:hover:before {
    border-width: 165px 0 0 165px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-close:hover:after {
    border-width: 0 165px 165px 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-close:active {
    background: #2896a3
}

.wz-coolhover-zoningin {
    color: #ad96a0
}

.wz-coolhover-zoningin:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent transparent transparent #5f4f56;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-zoningin:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent #5f4f56 transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-zoningin span:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent transparent #5f4f56 transparent;
    position: absolute;
    right: 0;
    bottom: 0
}

.wz-coolhover-zoningin span:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: #5f4f56 transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-zoningin:hover {
    color: #e7e0e3
}

.wz-coolhover-zoningin:hover:before {
    border-width: 165px 0 0 165px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-zoningin:hover:after {
    border-width: 0 165px 165px 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-zoningin:hover span:before {
    border-width: 0 0 165px 165px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-zoningin:hover span:after {
    border-width: 165px 165px 0 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-zoningin:active {
    background: #9e838f
}

.wz-coolhover-corners {
    color: #8d53b3
}

.wz-coolhover-corners:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent #492064 transparent transparent;
    position: absolute;
    top: 0;
    right: 0
}

.wz-coolhover-corners:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent transparent transparent #492064;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-corners:after,
.wz-coolhover-corners:before {
    border-color: #492064;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-corners span:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: #492064 transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-corners span:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent transparent #492064 transparent;
    position: absolute;
    right: 0;
    bottom: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-corners span:after,
.wz-coolhover-corners span:before {
    border-color: #492064;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-corners:hover {
    color: #decde9
}

.wz-coolhover-corners:hover:before {
    border-width: 20px 62.5px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-corners:hover:after {
    border-width: 20px 62.5px
}

.wz-coolhover-corners:hover span:before {
    border-width: 20px 62.5px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-corners:hover span:after {
    border-width: 20px 62.5px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-corners:active {
    background: #7935a6
}

.wz-coolhover-slice {
    color: #808695
}

.wz-coolhover-slice:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent #3f444e transparent transparent;
    position: absolute;
    top: 0;
    right: 0
}

.wz-coolhover-slice:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-color: transparent transparent transparent #3f444e;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-slice:hover {
    color: #dadce0
}

.wz-coolhover-slice:hover:after,
.wz-coolhover-slice:hover:before {
    border-width: 80px 262.5px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-slice:active {
    background: #697182
}

.wz-coolhover-alternate {
    color: #27692b
}

.wz-coolhover-alternate span:after,
.wz-coolhover-alternate span:before,
.wz-coolhover-alternate:after,
.wz-coolhover-alternate:before {
    content: '';
    position: absolute;
    top: 0;
    width: 63.5px;
    height: 0;
    background: #012f04;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-alternate:before {
    left: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-alternate:after {
    left: 125px
}

.wz-coolhover-alternate span:after,
.wz-coolhover-alternate span:before {
    top: auto;
    bottom: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-alternate span:before {
    left: 62.5px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-alternate span:after {
    left: 187.5px
}

.wz-coolhover-alternate :hover {
    color: #c0d3c1
}

.wz-coolhover-alternate:hover span:after,
.wz-coolhover-alternate:hover span:before,
.wz-coolhover-alternate:hover:after,
.wz-coolhover-alternate:hover:before {
    height: 80px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-alternate:active {
    background: #014f06
}

.wz-coolhover-smoosh {
    color: #5177a7
}

.wz-coolhover-smoosh:after,
.wz-coolhover-smoosh:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 0;
    background: #1e395b;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-smoosh:after {
    top: auto;
    bottom: 0
}

.wz-coolhover-smoosh:hover {
    color: #ccd7e5
}

.wz-coolhover-smoosh:hover:after,
.wz-coolhover-smoosh:hover:before {
    height: 40px;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-smoosh:active {
    background: #325f98
}

.wz-coolhover-overlap-vertical {
    color: #c93a8e
}

.wz-coolhover-overlap-vertical span:after,
.wz-coolhover-overlap-vertical span:before,
.wz-coolhover-overlap-vertical:after,
.wz-coolhover-overlap-vertical:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 0;
    background: rgba(115, 14, 73, .25);
    -webkit-transition: .4s;
    transition: .4s;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-overlap-vertical span:before,
.wz-coolhover-overlap-vertical:after {
    top: auto;
    bottom: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.wz-coolhover-overlap-vertical span:after,
.wz-coolhover-overlap-vertical span:before {
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.wz-coolhover-overlap-vertical:hover {
    color: #efc5de
}

.wz-coolhover-overlap-vertical:hover span:after,
.wz-coolhover-overlap-vertical:hover span:before,
.wz-coolhover-overlap-vertical:hover:after,
.wz-coolhover-overlap-vertical:hover:before {
    height: 80px
}

.wz-coolhover-overlap-vertical:active {
    background: #c0177a
}

.wz-coolhover-overlap-horizontal {
    color: #8f5c82
}

.wz-coolhover-overlap-horizontal span:after,
.wz-coolhover-overlap-horizontal span:before,
.wz-coolhover-overlap-horizontal:after,
.wz-coolhover-overlap-horizontal:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 80px;
    background: rgba(74, 38, 65, .25);
    -webkit-transition: .4s;
    transition: .4s
}

.wz-coolhover-overlap-horizontal span:before,
.wz-coolhover-overlap-horizontal:after {
    left: auto;
    right: 0
}

.wz-coolhover-overlap-horizontal span:after,
.wz-coolhover-overlap-horizontal span:before {
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.wz-coolhover-overlap-horizontal:hover {
    color: #decfda
}

.wz-coolhover-overlap-horizontal:hover span:after,
.wz-coolhover-overlap-horizontal:hover span:before,
.wz-coolhover-overlap-horizontal:hover:after,
.wz-coolhover-overlap-horizontal:hover:before {
    width: 250px
}

.wz-coolhover-overlap-horizontal:active {
    background: #7b3f6c
}

@-webkit-keyframes criss-cross-left {
    0% {
        left: -20px
    }
    50% {
        left: 50%;
        width: 20px;
        height: 20px
    }
    100% {
        left: 50%;
        width: 375px;
        height: 375px
    }
}

@keyframes criss-cross-left {
    0% {
        left: -20px
    }
    50% {
        left: 50%;
        width: 20px;
        height: 20px
    }
    100% {
        left: 50%;
        width: 375px;
        height: 375px
    }
}

@-webkit-keyframes criss-cross-right {
    0% {
        right: -20px
    }
    50% {
        right: 50%;
        width: 20px;
        height: 20px
    }
    100% {
        right: 50%;
        width: 375px;
        height: 375px
    }
}

@keyframes criss-cross-right {
    0% {
        right: -20px
    }
    50% {
        right: 50%;
        width: 20px;
        height: 20px
    }
    100% {
        right: 50%;
        width: 375px;
        height: 375px
    }
}

.wz-coolhover-collision {
    position: relative;
    color: #9a7cba
}

.wz-coolhover-collision:after,
.wz-coolhover-collision:before {
    position: absolute;
    top: 50%;
    content: '';
    width: 20px;
    height: 20px;
    background: #8865ae;
    border-radius: 50%
}

.wz-coolhover-collision:before {
    left: -20px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.wz-coolhover-collision:after {
    right: -20px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%)
}

.wz-coolhover-collision:hover:before {
    -webkit-animation: criss-cross-left .8s both;
    animation: criss-cross-left .8s both
}

.wz-coolhover-collision:hover:after {
    -webkit-animation: criss-cross-right .8s both;
    animation: criss-cross-right .8s both
}

.fade {
    opacity: 0;
    transition: opacity .15s linear
}

.fade.show {
    opacity: 1
}